<template>
  <div class="m-menu">

    <dl class="nav" @mouseleave="mouseleave">
      <dt>全部分类</dt>
      <dd v-for="(item,index) in menu" :key="index" @mouseenter='enter'>
        <i :class="item.type"/>{{item.name}}<span class="arrow"/>
      </dd>
    </dl>

    <div class="detail" v-if="kind" @mouseenter ="sover" @mouseleave="sout">
      <template v-for="(item,index) in curdetail.child" >
        <h4 :key="index">{{item.title}}</h4>
        <span v-for="v in item.child" :key="v">{{v}}</span>
      </template>
    </div>

  </div>
</template>

<script>
  export default {
    data(){
      return{
        kind:'',
        menu:[{
          type:'food',
          name:'美食',
          child:[{
            title:'meishi',
            child:['daijinquan','甜点','饮品']
          }]
        },{
          type:'takeout',
          name:'外卖',
          child:[{
            title:'外卖',
            child:['美团外卖']
          }]
        },{
          type:'hotel',
          name:'酒店',
          child:[{
            title:'酒店星级',
            child:['经济型','总统套房','大床房']
          }]
        }]
      }
    },
    computed:{
      curdetail:function () {
        return this.menu.filter((item) =>item.type === this.kind)[0]
      }

    },
    methods:{
      mouseleave:function () {
        let self = this;
        self._timer = setTimeout(function () {
          self.kind=''
        },150)
      },
      enter:function (e) {
        this.kind = e.target.querySelector('i').className
      },
      sover:function () {
        clearTimeout(this._timer)
      },
      sout:function () {
        this.kind=''
      }
    }
  }
</script>

<style lang="scss">

</style>
